<!-- 矛盾纠纷类型分布模块组件 -->
<template>
  <div class="ProgressBars">
    <div class="ProgressBars_context" v-for="(item,index) in dispute" :key="index">
      <span class="headline">{{item.headline}}</span>
      <div :class="{ProgressBars_tiao:index%2===0,ProgressBars_tiao1:index%2!==0}">
          <el-progress :percentage=item.ProgressBarsTiao></el-progress>
      </div>
      <span class="ProgressBars_data">{{item.ProgressBarsData}}</span>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      dispute: [
        { headline: '邻里纠纷', ProgressBarsTiao: 100, ProgressBarsData: 165 },
        { headline: '土地及资源权属', ProgressBarsTiao: 100, ProgressBarsData: 103 },
        { headline: '婚恋家庭纠纷', ProgressBarsTiao: 53, ProgressBarsData: 53 },
        { headline: '物权相关纠纷', ProgressBarsTiao: 60, ProgressBarsData: 60 },
        { headline: '侵权相关纠纷', ProgressBarsTiao: 41, ProgressBarsData: 41 },
        { headline: '劳动人事争议', ProgressBarsTiao: 28, ProgressBarsData: 28 },
        { headline: '其他民商事', ProgressBarsTiao: 38, ProgressBarsData: 38 },
        { headline: '合同相关纠纷', ProgressBarsTiao: 16, ProgressBarsData: 16 },
        { headline: '金融借贷', ProgressBarsTiao: 12, ProgressBarsData: 12 },
        { headline: '人格权纠纷', ProgressBarsTiao: 7, ProgressBarsData: 7 },
        { headline: '城乡建设发展', ProgressBarsTiao: 4, ProgressBarsData: 4 },
        { headline: '涉民纠纷', ProgressBarsTiao: 4, ProgressBarsData: 4 },
        { headline: '设法纠纷', ProgressBarsTiao: 2, ProgressBarsData: 2 }
      ],
      sum: 0
    }
  },
  computed: {},
  watch: {},
  methods: {}
}
</script>
<style lang='less' scoped>
.ProgressBars {
    .ProgressBars_context {
        width: 100%;
        height: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: YouShe;
        padding-right: 10px;
        .headline{
            min-width: 80px;
            font-size: 12px;
            text-align: right;
        }
        .ProgressBars_tiao {
            /deep/ .el-progress-bar__outer {
                background-color: #012a2c;
            }
            /deep/ .el-progress-bar__inner  {
                background-color: #00ffff;
            }
        }
        .ProgressBars_tiao1 {
            /deep/ .el-progress-bar__outer {
                background-color: #012a2c;
            }
            /deep/ .el-progress-bar__inner  {
                background-color: #ff7777;
            }
        }
        /deep/ .el-progress__text {
            display: none;
        }
        /deep/ .el-progress-bar {
            width: 340px;
            padding: 0;
        }
        /deep/ .el-progress--line {
            width: 340px;
        }
    }
}
</style>
